<!-- 时间滚动组件 -->

<template>
  <view>
    <view class="flex flex-direction align-center justify-center kaoqindaka_fd2_0" @click.stop="chooseTime">
      <view class="kaoqindaka_fd2_0_c0">考勤打卡</view>
      <view class="flex jcenter">
        <view class="transit-h" v-for="(item,index) in time" :key="index">
          <view v-show="item != timeCopy[index]">
            <u-transition :show="item != timeCopy[index]" mode="slide-up" duration="100">
              {{item}}
            </u-transition>
          </view>
          <view v-if="item == timeCopy[index]">
            {{item}}
          </view>
        </view>

      </view>
    </view>
  </view>
</template>
<script>
  /**
   * @description 时间滚动
   * @example <h-time-roll ref="timeRoll"></h-time-roll>
   *
   * @property {String}			color				字体颜色（默认 #000 ）
   * @property {String}			background			背景颜色（默认 #fff ）
   * @property {Boolean}			boxShow				是否显示阴影（默认 true ）
   * @property {String}			boxShadow			阴影颜色（默认 #f15723）
   * @property {String}			fontSize			数字字体大小（默认 90rpx）
   * @property {String}			fontFamily			字体 (可选值-（digital-7、LcdD、自定义）)
   *
   */
  export default {
    // 小程序样式穿透
    options: {
      styleIsolation: 'shared'
    },
    name: 'h-time-roll',
    props: {
      // 字体颜色
      color: {
        type: String,
        default: '#000'
      },
      // 数字字体大小
      fontSize: {
        type: String,
        default: '90rpx'
      },
      // 背景颜色
      background: {
        type: String,
        default: '#fff'
      },
      // 是否显示阴影
      boxShow: {
        type: Boolean,
        default: true
      },
      // 阴影颜色
      boxShadow: {
        type: String,
        default: '#f15723'
      },
      // 字体
      fontFamily: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        time: '', //当前时间
        timeCopy: '', //复制当前时间
        timer: '', //定时器
        timeCopys: ''
      }
    },
    watch: {
      time(val) {
        setTimeout(() => {
          this.timeCopy = val
        }, 500)
      }
    },
    created() {
      this.openTime()
    },
    methods: {
      // allDaka() {
      //   let obj = {
      //     time: this.time,
      //     timeCopys: this.timeCopys
      //   }
      //   this.$emit('change', obj)
      // },
      chooseTime(item) {
        let obj = {
          time: this.time,
          timeCopys: this.timeCopys
        }
        this.$emit('change', obj)
      },
      // 打开定时器
      openTime() {
        this.time = this.$u.timeFormat(new Date(), 'hh:MM:ss')
        this.timeCopy = this.$u.timeFormat(new Date(), 'hh:MM:ss')
        this.timeCopys = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
        this.timer = setInterval(() => {
          let time = new Date()
          this.time = this.$u.timeFormat(new Date(), 'hh:MM:ss')
        }, 1000)
      },
      // 关闭定时器
      closeTime() {
        clearInterval(this.timer)
      }
    },
  }
</script>
<style lang="scss" scoped>
  page {
    background: #f9f9f9;
    font-family: '微软雅黑', sans-serif;
    font-size: 28rpx;
    min-height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  @font-face {
    font-family: 'LcdD';
    src: url(../../static/LcdD.ttf);
  }

  @font-face {
    font-family: 'digital-7';
    src: url(../../static/digital-7.ttf);
  }

  .flex {
    display: flex;
  }

  .jcenter {
    justify-content: center;
    margin-top: 10rpx;
  }

  .kaoqindaka_fd2_0_c0 {
    font-size: 36rpx;
  }

  .kaoqindaka_fd2_0 {
    background: url(image-path('154.png')) no-repeat;
    background-size: 100% 100%;
    width: 381rpx;
    height: 381rpx;
    color: var(--benbenFontColor3);
    margin: 320rpx auto 0 auto;
  }

  .transit-h {
    overflow: hidden;
    // width: 80rpx;
    // height: 100rpx;
    // line-height: 100rpx;
    float: left;
    list-style: none;
    margin-right: 3rpx;
    display: flex;
    justify-content: center;
  }
</style>
